<template>
	<view class="container">
		<view class="">
			<view class="title">欢迎来到车辆综合服务平台商家端</view>
			<form ref="valiForm" :modelValue="login">
				<view class="input">
					<input type="text" require placeholder="输入手机号" name="phone" maxlength="11" @input="onKeyInput"
						v-model="shopLogin.phone" />
				</view>
				<view class="input code">
					<!-- <input type="text" placeholder="输入手机验证码" />
					<view></view>
					<button class="getCode" @click="getCode">获取验证码</button> -->
					<uni-forms-item label=" 验证码" name="captcha" style="display: flex;">
						<uni-easyinput style="width: 300rpx;" :clearable="false" v-model="shopLogin.captcha"
							placeholder="请输入验证码" />
					</uni-forms-item>
					<view v-if="btnStatus" style="height: 70rpx; line-height: 70rpx;">{{captcha}}</view>
					<button v-if="!btnStatus" class="getCode" @click="getCode">获取验证码</button>
					<view v-if="btnStatus" class="time">
						<view style="line-height: 40rpx; width: 104rpx;">再次发送</view>
						<uni-countdown :show-day="false" :showHour="false" :show-minute="false" :second="60"
							@timeup="timeup"></uni-countdown>
					</view>
				</view>
				<navigator url="/pages/register/register" class="register">立即注册</navigator>
				<button class="button" @click="login('valiForm')">登录</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				btnStatus: false,
				shopLogin: {
					phone: '15899966622', //手机号
					captcha: '', //验证码
				},
				code: false,
				captcha:''
			}
		},
		methods: {
			login(ref) {
				//校验并登录
				let that = this
				//this.$refs[ref].validate()布尔值 true或false
				uni.request({
					url: 'http://localhost:8080/auth/appLogin',
					method: 'POST',
					data: {
						phone: this.shopLogin.phone,
						code: this.shopLogin.captcha
					},
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token)
							that.getUserInfo()
							uni.navigateTo({
								url: '/pages/index/index'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			getCode() {
				let that = this
				this.getUserInfo();
				if (this.code) {
					uni.request({
						url: 'http://localhost:8080/auth/getCode',
						method: 'POST',
						data: {
							phone: this.shopLogin.phone,
						},
						success(res) {
							console.log(res)
							if (res.data.code == 200) {
								uni.showToast({
									title: '验证码已发送',
									icon: 'success',
									duration: 2000
								})
								that.btnStatus = true
								console.log(res)
								that.captcha = res.data.data
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'fail',
									duration: 2000
								})
							}
						}
					})
				}
			},
			timeup() {
				this.btnStatus = false
			},
			getUserInfo() {
				let that = this
				uni.request({
					url: 'http://localhost:8080/merchant/shopVerification/list',
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					method: 'GET',
					data: {
						mobile: that.shopLogin.phone
					},
					success(res) {
						if (res.data.code == 200) {
							console.log(res);
							if (res.data.total == 0) {
								console.log(res.data.total)
								uni.navigateTo({
									url: '/pages/register/register'
								})
							} else {
								that.code = true
								uni.setStorageSync('userInfo', res.data.rows[0])
							}
						}
						// console.log(that.code);
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding: 20rpx 32rpx;
	}

	.title {
		font-size: 36rpx;
		color: #000;
		margin: 10rpx 0 60rpx;
	}

	.input {
		padding: 30rpx 0 0;
		border-bottom: 2rpx solid #8C8B8B;
	}

	.code {
		display: flex;
		justify-content: space-between;
	}

	.code>view {
		color: #8C8B8B;
	}

	.getCode {
		margin-left: 10rpx;
		background-color: #007aff;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
	}

	.register {
		margin-top: 40rpx;
		color: #1D6FFF;
	}

	.button {
		margin-top: 100rpx;
		/* width: 90%; */
		background-color: #007aff;
		color: #fff;
	}

	.time {
		height: 70rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		/* margin-left: 20rpx; */
		padding: 0 10rpx;
		background-color: #eee;
		border-radius: 10rpx;
	}

	.time uni-countdown {
		display: flex;
		align-items: center;
	}
</style>